<template>
  <div class="my-product">
    <h3>标题: {{ title }}</h3>
    <p>价格: {{ price }}元</p>
    <p>{{ info }}</p>
  </div>
</template>

<script>
export default {
  // 使用 props 接收父组件传递的数据
  // 数组里面写字符串, 字符串就是父组件传递的属性名
  // 接收到数据后, 可以把它们当 data 中的数据来使用
  props: {
    title:{
    //必选项,必须传过来
      required:true,
      //类型,首字母大写
      typeof:String
    },
    price:{
    //必选项,必须传过来
      required:true,
      //类型,首字母大写
      type:Number
    },
    info:{
    //必选项,必须传过来
    // required:true,
    //类型,首字母大写
    typeof:String,
    // 设置默认值,一般情况下和required不会一起设置
    default:'非常好吃!我是默认值'
    }
  }
}
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>